<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="/css/camboadd.css">
    <link rel="stylesheet" href="/lib/cropper/cropper.css">
    <title>Document</title>
</head>

<body>
    <div class="cambo-addList">
        <div class="layui-card pl-wid">

            <div class="layui-card-body">
                <!-- 表单域 -->
                <form class="layui-form">
                    <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                    <!-- 套餐名称 -->
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label w110 fzgray"> <span class="layui-font-red">*</span>
                            套餐名称：</label>
                        <div class="layui-input-block w300 pl-fa">
                            <input type="text" name="" id="pl-getf" placeholder="请填写套餐名称" autocomplete="off"
                                class="layui-input pl-getf">
                            <span class="layui-font-red layui-font-12 pl-son" style="display: none;">请填写套餐名称</span>
                        </div>
                    </div>
                    <!-- 套餐分类 下拉列表 -->
                    <div class="layui-form-item layui-inline pl-classify">
                        <label class="layui-form-label w110 fzgray"> <span class="layui-font-red ">*</span>
                            套餐分类：</label>
                        <div class="layui-input-block w300 ">
                            <select name="categoryId" lay-filter="categoryId" lay-verify="required" class="w300 pl-getf"
                                id="pl-camboClass">
                                <option value=""></option>
                                <!-- <option value="请选择套餐分类">请选择套餐分类</option>
                                <option value="0">北京</option>
                                <option value="1">上海</option>
                                <option value="2">广州</option>
                                <option value="3">深圳</option>
                                <option value="4">杭州</option> -->
                            </select>
                        </div>
                    </div>
                    <!-- 套餐价格 -->
                    <div class="layui-form-item " style="margin-top: 20px;">
                        <label class="layui-form-label w110 fzgray"> <span class="layui-font-red">*</span>
                            套餐价格：</label>
                        <div class="layui-input-block w300 pl-fa">
                            <input type="text" name="" placeholder="请填写套餐价格" autocomplete="off"
                                class="layui-input pl-getf" id="pl-priceha">
                            <span class="layui-font-red layui-font-12 pl-son" style="display: none;">请填写套餐价格</span>
                        </div>

                    </div>

                    <!-- 套餐菜品 添加菜品 -->
                    <div class="layui-form-item " style="margin-top: 30px;">
                        <label class="layui-form-label w110 fzgray"> <span class="layui-font-red">*</span>
                            套餐菜品：</label>
                        <button type="button" class="pl-addSonlist layui-btn layui-btn-warm layui-font-black"
                            id="firstjo">+
                            添加菜品</button>
                        <div class="pl-addcaibox" style="display: none;">
                            <button type="button" class="pl-addSonlist mb20 layui-btn layui-btn-warm layui-font-black">+
                                添加菜品</button>
                            <div class="layui-card">

                                <table class="layui-table " lay-skin="line">
                                    <colgroup>
                                        <col width="180">
                                        <col width="180">
                                        <col>
                                        <col width="180">
                                    </colgroup>
                                    <thead>
                                        <tr class="pl-addfi pl-k">
                                            <th>名称</th>
                                            <th>原价</th>
                                            <th>份数</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="aoye">
                                        <tr class="pl-addfi">
                                            <td>贤心</td>
                                            <td>2016-11-29</td>
                                            <td>
                                                <div class="layui-btn-group ">
                                                    <button type="button"
                                                        class=" layui-btn-disabled layui-btn layui-btn-primary layui-btn-sm">
                                                        <i class="layui-icon rudecnum">&#xe67e;</i>
                                                    </button>
                                                    <button type="button"
                                                        clapl-listss="layui-btn layui-btn-primary layui-btn-sm change">
                                                        <i class="pl-jonum">1</i>
                                                    </button>
                                                    <button type="button"
                                                        class="layui-btn layui-btn-primary layui-btn-sm">
                                                        <i class="layui-icon addnum">&#xe654;</i>
                                                    </button>
                                                </div>
                                            </td>
                                            <td>人生就像是一场修行</td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>

                    </div>

                    <!-- 套菜图片 -->
                    <div class="layui-form-item">
                        <!-- 左侧的 label -->
                        <label class="layui-form-label w110 fzgray"> <span class="layui-font-red">*</span>
                            套餐图片：</label>
                        <!-- 选择封面区域 -->
                        <div class="layui-input-block cover-box">
                            <!-- 左侧裁剪区域 -->
                            <div class="cover-left" id="btnChooseImage">
                                <a href="javascript:;" style="line-height: 160px;">上传图片</a>
                                <img id="image" src="" alt="" />
                            </div>
                        </div>
                        <input name="image" type="file" id="coverFile" style="display: none;"
                            accept="image/png,image/jpeg,image/gif" />
                    </div>

                    <!-- 套餐描述 -->
                    <div class="layui-form-item " style="margin-top: 25px;">
                        <label class="layui-form-label w110 fzgray"> <span class="layui-font-red">*</span>
                            套餐描述：</label>
                        <div class="layui-input-block">
                            <textarea name="" required lay-verify="required" id="pl-kj" placeholder="套餐描述,最长200字"
                                class="layui-textarea cambo-text pl-getf"></textarea>
                        </div>
                    </div>

                    <!-- 按钮 -->
                    <div class="pl-btnbigbox">
                        <div class="pl-btns">
                            <button class="layui-btn layui-btn-primary" id="backList">取消</button>
                            <button class="layui-btn layui-btn-warm layui-font-black saveMsg">保存</button>
                            <button class="layui-btn layui-bg-black saveadd" style="color: #ffffff;">保存并添加套餐</button>
                        </div>

                    </div>

                </form>
            </div>
        </div>
    </div>

    <!-- 引入第三方插件 -->
    <script src="../layui/layui.js"></script>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/template-web.js"></script>

    <script src="/lib/cropper/Cropper.js"></script>
    <script src="/lib/cropper/jquery-cropper.js"></script>
    <!-- 添加自定义 -->
    <script src="../js/camboadd.js"></script>
</body>

<!-- 列表模板 -->
<!-- <script type="text/html" id="pl-list">
    <select name="city" lay-verify="required" class="w300 pl-getf" >
        {{each data}}
        <option value="{{$value.name}}" data-id="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </select>
</script> -->

<script type="text/html" id="pl-list">
    <option value="">请选择套餐分类</option>
        {{each data}}
        <option  value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
 </script>

<!-- 菜品模板 大模板-->
<script type="text/html" class="pl-ymym" id="pl-ymym">

        <div class="layui-card-header cambo-head">
            <span class="sm-title" layui-inline>添加菜品</span>
            <span class="pl-img">
                <i class="layui-icon layui-font-14 layui-font-gray">&#xe615;</i>
            </span>
            <input type="text" placeholder="请输入菜品名称进行查找" id="getWant">
        </div>
        <div class="layui-card-body cambo-body" style="width: 340px;">
            <div class=" lblk">
                <ul class="layui-menu" id="docDemoMenu1" style=" width: 150px;">
                    {{each data}}
                    <li lay-options="{id: 100}" data-id="{{$value.id}}" class="gun">
                        <div class="layui-menu-body-title">{{$value.name}}</div>
                    </li>
                    {{/each}}
                </ul>
            </div>
            <div class="sm-bod" id="qiaqia">
                <div class="jo-list no">暂无菜品！</div>
                
            </div>
            <div class="sm-chose">
                <div style="color: #818693;">已选菜品(0)</div>
                <div class="pl-choselist xswl" >
                    
                </div>
            </div>
        </div>
        <div class="endnow">
            <span class="jo-listbtn">
                <button type="reset" class="layui-btn layui-btn-primary clone-index" >取消</button>
                <button type="button" class="layui-btn sure-index">确定</button>
            </span>      
        </div>
    </div>
</script>

<!-- 菜品模板 第二个模板 -->
<script type="text/html" id="koko">
    <div class="jo-list no" style="display: none;">暂无菜品！</div>
    {{each data}}
    <div class="jo-list else">
                
        <span>
            <input type="checkbox" class="sha" data-id="{{$value.id}}">
        </span>
        <span class="pl-listname" data-name="{{$value.name}}">{{$value.name | numBall}}</span>
        <div class="fan">
            <span class="liststatus">在售</span>
            <span class="listprice">{{$value.price}}</span>
        </div>
        
    </div>
    {{/each}}
</script>

<!-- 第三个模板 -->
<script type="text/html" id="caicai">
    <div style="color: #818693;">已选菜品({{length}})</div>
    {{each data}}
    <div class="pl-choselist">
        <span class="pl-choselistname" data-name="{{$value.name}}">{{$value.name | numBall}}</span>
        <span style="color: #818693;">￥ {{$value.price}}</span>
        <span class="pl-dellist" data-id="{{$value.id}}"><i class="layui-icon" style="color: #818693;">&#x1007;</i> </span>
    </div>  
    {{/each}}
    <div class="pl-choselist xswl" ></div>
</script>

<!-- 确认后第四个模板 -->
<script type="text/html" id="moban-f">
    {{each data}}
    <tr class="pl-addfi">
        <td>{{$value.name}}</td>
        <td>{{$value.price}}</td>
        <td>
            <div class="layui-btn-group ">
                <button type="button"
                    class=" layui-btn-disabled layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon rudecnum">&#xe67e;</i>
                </button>
                <button type="button"
                    class="layui-btn layui-btn-primary layui-btn-sm change">
                    <i class="pl-jonum copies" data-copies="1" data-id="{{$value.id}}">1</i>
                </button>
                <button type="button"
                    class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon addnum">&#xe654;</i>
                </button>
            </div>
        </td>
        <td style="color: orange;" data-id="{{$value.id}}" class="gabugabu">删除</td>
    </tr>
    {{/each}}
</script>



</html>